<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="聊天室,Netty,WebSocket">
    <meta name="author" content="Andy">
    <link rel="icon" href="./favicon.ico">
    <title>聊天室</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/reset.css">
    <link rel="stylesheet" href="bootstrap/css/chat.css">
    <!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="menuForm">
                    <input type="hidden" name="id" id="id"/>
                    <div class="form-group">
                        <label for="nick" class="col-sm-2 control-label">用户名:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control validate[required]" name="nick" id="nick">
                        </div>
                        <label for="password" class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control validate[required]" name="password" id="password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="loginBtn">登录</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!--<div class="modal-header">-->
            <!--<h4 class="modal-title">提示信息</h4>-->
            <!--</div>-->
            <div class="modal-body" id="tipMsg" style="align:center;"></div>
        </div>
    </div>
</div>

<div class="container-fluid" id="chatWin" style="display:none;width:100%;">
    <div class="row top" >
        <div class="col-sm-12" id="top">
            <div style="color:#fff;">
                在线人数：<span id="userCount" style="color:#fff;">11220</span> 人
            </div>
        </div>
    </div>
    <div class="row">
        <div id="content">

        </div>
    </div>
    <div class="row" id="opt" style="height:40px;">
        <div class="col-xs-2" style="padding:0;height:40px;line-height:40px;text-align:center;">
            <button id="faceBtn" style="height:40px;width:100%;outline:none;line-height:40px;">表情</button>
        </div>
        <div class="col-xs-8" style="padding:0;height:40px;line-heght:40px;">
            <input type="text" id="mess" style="margin:0;width:100%;height:40px;outline:none;"/>
        </div>
        <div class="col-xs-2" style="padding:0;">
            <button id="sendBtn" style="height:40px;width:100%;outline:none;line-height:40px;">send</button>
        </div>
    </div>
</div>

<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/jquery.qqFace.js"></script>
<script type="text/javascript" src="bootstrap/js/chat.js"></script>
</body>
</html>